<template>
    <div class="cardbg">
        <div class="card">
        
            <el-row style="height: 30px;" align="middle">
                <div style="width: 6px; height:20px;background-color:#2984f8;border-radius: 5px;margin-right: 10px;">
                </div>
                <span style="font-size: 18px;">居民管理</span>
            </el-row>
            <!-- 筛选项 -->


            <el-form :model="userqueryParams" size="large" :inline="true" label-width="68px">
                <el-form-item label="签约状态" style="width: 20%;">
                    <el-select v-model="userqueryParams.status" placeholder="请选择" clearable>
                        <el-option v-for="dict in status" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="签约机构">
                    <el-input v-model="userqueryParams.institution" placeholder="请输入签约机构" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="医生团队">
                    <el-input v-model="userqueryParams.team" placeholder="请输入医生团队" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>

                <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['resident:resident:add']"
        >新增居民档案</el-button>

                <el-form-item label="服务包">
                    <el-input v-model="userqueryParams.servicepackage" placeholder="请输入服务包" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="居民标签" style="width: 20%;">
                    <el-select v-model="userqueryParams.userlabel" multiple placeholder="请选择">
                        <el-option v-for="item in userlable" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 20%;">
                    <el-input v-model="userqueryParams.keyword" placeholder="请输入关键字" clearable
                        @keyup.enter="handleQuery">
                        <template #suffix>
                            <el-button text style="padding: 0%;margin: 0;"> <template #icon>
                                    <el-icon size="20">
                                        <Search />
                                    </el-icon>
                                </template></el-button>

                        </template>

                    </el-input>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>

import { ElMessage } from "element-plus";
import { ref } from "vue";
// 筛选条件
let userqueryParams = ref({
    status: "",
    institution: "",
    team: "",
    servicepackage: "",
    userlabel: [],
    keyword: "",
});
// 用户标签
let userlable = ref([])
// 签约状态
let status = [
    { value: "1", label: "待签约" },
    { value: "2", label: "签约中" },
    { value: "3", label: "签约生效中" },
    { value: "4", label: "待续约" },
];
// 签约机构
let institution = ref([])
//按下回车查询
const handleQuery = () => {
    ElMessage({
        message: "enter查询中...",
        type: "info",
    })
    getList()
}
// 查询
function getList() {
    ElMessage({
        message: "查询中...",
        type: "info",
    });

}
</script>
<style scoped>
.cardbg {
    width: 100%;
    height: 100%;
    background-color: #f2f7fb;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    /* 圆角 */
    border-radius: 10px;
    width: 80%;
    height: 100%;
    background-color: white;
    padding: 20px;
}
</style>